<template>
  <div class="ssal-calendar-container">
    <div class="week-view">
      <div class="header-week" ref="headerHeight">
        <div class="header-time-zone">{{ timeZone }}</div>
        <div
          class="week-day-container"
          @dragenter="handledrapEnter($event)"
          @dragover="handledrapOver($event)"
        >
          <div class="week-day-box">
            <div
              :class="[
                'week-cell',
                item.isDay ? 'week-today' : '',
                checkOutWeek(item) ? 'unable' : '',
                item.weekend ? 'weekend-day' : '',
              ]"
              v-for="(item, index) in week"
              :key="item.day"
              :data-index="index"
              :data-date="item.fullDate"
              @click.prevent="handleWeekHeaderLeft"
              @contextmenu.prevent="handleWeekHeaderRight"
              @dragenter="handledrapEnter($event, 'header')"
              @dragleave="handledragLevel($event, 'header')"
              @dragover="handledrapOver($event, 'header')"
              @drop="handledragLevel($event, 'header')"
            >
              <span class="week" :data-index="index" :data-date="item.fullDate"
                >周{{ weekTitle[index].day }}</span
              >
              <div class="date" :data-index="index" :data-date="item.fullDate">
                <span
                  class="day"
                  :data-index="index"
                  :data-date="item.fullDate"
                  >{{ item.date }}</span
                >
                <span
                  class="lunar"
                  :data-index="index"
                  :data-date="item.fullDate"
                  >{{
                    item.lunar.IDayCn == "初一"
                      ? item.lunar.IMonthCn
                      : item.lunar.IDayCn
                  }}</span
                >
              </div>
            </div>
          </div>
          <!-- 时间定位 -->
          <div
            v-if="showHeaderTime"
            class="time-placeholder-box"
            style="position: relative; top: 60px; height: 20px"
          >
            <div class="close-bg" @click="showHeaderTime = false"></div>
            <div
              class="time-placeholder"
              id="timeRef"
              :style="{
                top: 0,
                left: 'calc(100% / 7 * ' + timeDistance.left + ')',
                width: 'calc(100% / 7)',
                marginLeft: 0,
              }"
              data-header="header"
              :data-day="timeDistance.left"
            >
              添加事件
            </div>
          </div>
          <AllDayWeekEventItem
            v-if="week.length > 0 && deEvents.allDayArr.length > 0"
            :event="deEvents.allDayArr"
            :week="week"
            :dropData="dropMessage"
            @getEvent="getAllDayEvent"
            @getModelEvent="getModelEvent"
            @editInfo="editInfo"
            @delEvent="delEvent"
            @completeEvent="completeEvent"
            @readInfo="readInfo"
          >
            <template v-slot:default="slotItem">
              <template v-if="slotItem.codeName">{{ slotItem.codeName }}·</template>
              <pennant 
                v-if="Number(slotItem.targetType) === 1 || Number(slotItem.targetType) === 0"
                style="margin-left:3px"
                theme="filled" 
                size="13" 
                :fill="slotItem.color"
              />
              <template v-if="slotItem.state == -1">
                <file-date-one style="top: 2px;position: relative;" theme="outline" size="12" :fill="slotItem.color" />
                (待审核)
              </template>
              <template v-else-if="slotItem.state == -2">
                <close-one style="top: 1px;position: relative;" theme="outline" size="12" :fill="slotItem.color" />
                (已驳回)
              </template>
              <template v-else-if="slotItem.state == 3">
                <file-withdrawal style="top: 2px;position: relative;" theme="outline" size="12" :fill="slotItem.color" />
                (已退回)
              </template>
              {{ slotItem.title || "（无主题）" }}
            </template>
          </AllDayWeekEventItem>
        </div>
      </div>
      <div
        class="week-container"
        :style="{ marginRight: isMobile() ? '-8px' : '-8px' }"
      >
        <ScrollBar
          autoHide
          :forData="len"
          :ScrollTop="ScrollTop"
          :listenScrollBottom="listenScrollBottom"
          :listenScrollTop="listenScrollTop"
          :listenScroll="listenScroll"
        >
          <div
            class="scroll-container"
            id="scroll"
            @dragenter="handledrapEnter($event)"
            @dragover="handledrapOver($event)"
          >
            <div
              v-if="checkCurrentWeek"
              class="time-line"
              :style="{ top: getTop + 'px' }"
            >
              <div class="current">
                {{ currentTime.hour + ":" + currentTime.min }}
              </div>
              <div
                :class="[
                  'current-line',
                  currentTime.dd == 1 ? 'firstDayDotted' : '',
                ]"
                :style="{
                  width:
                    'calc((100% - 80px) / 7 *' +
                    (currentTime.dd == 0 ? 7 : currentTime.dd) +
                    ')',
                }"
              ></div>
            </div>
            <div class="time-container">
              <div
                class="time-cell"
                v-for="(item, index) in initHours"
                :key="item"
              >
                <div :class="['time', checkOut(item) ? '' : 'outTime']">
                  {{ index == 0 ? "" : item }}
                </div>
                <div
                  :class="['week-data', cell.isDay ? 'today' : '']"
                  v-for="(cell, cdx) in week"
                  :key="cell"
                >
                  <div
                    class="week-half"
                    v-for="(half, index) in 2"
                    :key="half"
                    :data-day="cdx"
                    :data-date="cell.fullDate"
                    :data-time="filterHalfTime(item, index)"
                    :data-index="index"
                    @click="handleWeekLeft($event)"
                    @contextmenu.prevent="handleWeekRight($event)"
                    @dragenter="handledrapEnter($event)"
                    @dragleave="handledragLevel($event)"
                    @dragover="handledrapOver($event)"
                    @drop="handledragLevel($event)"
                  ></div>
                  <div
                    v-if="
                      cell.fullDate + ' ' + item ==
                        currentTime.year +
                          '-' +
                          currentTime.month +
                          '-' +
                          currentTime.day +
                          ' ' +
                          currentTime.hour +
                          ':00' && cdx != 0
                    "
                    class="current-dotted"
                    :style="{
                      top: 'calc(40px * ' + currentTime.min / 60 + ' - 5px)',
                    }"
                  ></div>
                </div>
              </div>
            </div>
            <div v-if="showTime" class="time-placeholder-box">
              <div class="close-bg" @click="showTime = false"></div>
              <div
                class="time-placeholder"
                :style="{
                  top: timeDistance.top * 40 + 'px',
                  left: 'calc((100% - 80px) / 7 * ' + timeDistance.left + ')',
                  width: 'calc((100% - 80px) / 7)',
                }"
                id="timeRef"
                data-type="scroll"
              >
                {{ selectedTime }}
              </div>
            </div>
            <EventItem
              v-if="
                initHours.length > 0 &&
                deEvents.sameDayArr.length > 0 &&
                week.length > 0 &&
                nowDate
              "
              view="week"
              :events="deEvents.sameDayArr"
              :hours="initHours"
              :week="week"
              :date="nowDate.fullDate"
              :dropData="dropMessage"
              @getEvent="getEvent"
              @exchangeDate="exchangeDate"
              @editInfo="editInfo"
              @delEvent="delEvent"
              @completeEvent="completeEvent"
              @readInfo="readInfo"
            >
              <template v-slot:week="slotItem">
                <template v-if="slotItem.codeName">{{ slotItem.codeName }}·</template>
                <pennant 
                  v-if="Number(slotItem.targetType) === 1 || Number(slotItem.targetType) === 0"
                  style="margin-left:3px"
                  theme="filled" 
                  size="13" 
                  :fill="slotItem.color"
                />
                <template v-if="slotItem.state == -1">
                  <file-date-one style="top: 2px;position: relative;" theme="outline" size="12" :fill="slotItem.color" />
                  (待审核)
                </template>
                <template v-else-if="slotItem.state == -2">
                  <close-one style="top: 1px;position: relative;" theme="outline" size="12" :fill="slotItem.color" />
                  (已驳回)
                </template>
                <template v-else-if="slotItem.state == 3">
                  <file-withdrawal style="top: 2px;position: relative;" theme="outline" size="12" :fill="slotItem.color" />
                  (已退回)
                </template>
                {{ slotItem.title || "（无主题）" }}, {{ slotItem.hours }}
              </template>
            </EventItem>
            <EventForm
              :dialogEventFormVisible="dialogEventFormVisible"
              :code="formCode"
              :item-id="itemId"
              :title="formTitle"
              :event-id="eventId"
              :readOnly="readOnly"
            ></EventForm>
            <model-option-box
              :dialogModelVisible="dialogModelVisible"
              :type="modelType"
              @close-form="CloseModel"
              @get-quick="getQuick"
            ></model-option-box>
          </div>
        </ScrollBar>
      </div>
    </div>
    <!-- <EventDetail
      :dialogEventDetailVisible="dialogEventDetailVisible"
      :event="itemInfo"
      @edit-info="editInfo"
      @del-event="delEvent"
    ></EventDetail> -->
  </div>
</template>

<script>
import AllDayWeekEventItem from "../AllDayWeekEventItem/index.vue";
// import EventDetail from "../EventDetail/AuthorityManage.vue";
import EventForm from "../EventForm/index.vue";
import ScrollBar from "../ScrollBar/index.vue";
import EventItem from "../EventItem/index.vue";
import ModelOptionBox from "../ModelOptionBox/index.vue";

import { ElMessage } from 'element-plus'
import { Pennant, FileDateOne, CloseOne, FileWithdrawal } from '@icon-park/vue-next'

import {
  reactive,
  ref,
  toRefs,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  nextTick,
} from "vue";
import { getCurrent, getTimeZone } from "../lib/utils";
import { filterDay } from "../lib/event";
import { isMobile } from "../lib/scroll";
import { currentForm } from "../lib/config.js";

export default {
  name: "WeekPage",
  components: {
    AllDayWeekEventItem,
    // EventDetail,
    EventForm,
    ScrollBar,
    EventItem,
    ModelOptionBox,
    Pennant,
    FileDateOne,
    CloseOne,
    FileWithdrawal
  },
  props: {
    week: {
      type: Array,
      default() {
        return [];
      },
    },
    events: {
      type: Array,
      default() {
        return [];
      },
    },
    nowDate: {
      type: Object,
      default() {
        return {};
      },
    },
    initHours: {
      type: Array,
      default() {
        return [];
      },
    },
    weekTitle: {
      type: Array,
      default() {
        return [];
      },
    },
    belongsUser: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    filterHalfTime() {
      return (item, index) => {
        if (index == 1) {
          return item.split(":")[0] + ":30";
        } else {
          return item;
        }
      };
    },
  },
  setup(props, context) {
    let { events, nowDate, initHours, week } = toRefs(props);
    let calcHours = ref(initHours.value);
    let timeDistance = ref({
      top: 0,
      left: 0,
    });
    let showHeaderTime = ref(false);
    let showTime = ref(false);
    let defaultForm = ref({});
    let itemInfo = ref({});
    let dialogEventFormVisible = ref(false);
    let dialogEventDetailVisible = ref(false);
    let ScrollTop = ref(0);
    let deEvents = ref(filterDay(events.value)); // 筛选后的events
    let scrollDistance = ref(0); // 滚动距离
    let headerHeight = ref(null); // header的高度
    let selectedTime = ref(null);
    let currentTime = ref({});
    let dialogModelVisible = ref(false);
    let dropMessage = ref({});
    let num = 0;
    let modelType = ref(1)
    const state = reactive({
      timeZone: `GMT${getTimeZone()}`,
      len: 0,
      currentInterver: null,

      formCode: null,
      itemId: null,
      formTitle: null,
      // 当前存在的事项
      formExist: currentForm,
      eventId: null, // 事项的id
      readOnly: false
    });
    // 滚动条事件
    const listenScrollBottom = () => {};
    const listenScrollTop = () => {};
    const listenScroll = (e) => {
      scrollDistance.value = e;
    };
    // 左键周
    const handleWeekLeft = (e) => {
      num++;
      setTimeout(() => {
        if (num == 1) {
          modelType.value = 1
          getDistance(e);
          dialogModelVisible.value = !dialogModelVisible.value;
        }
        if (num == 2) {
          // const { fullDate, spliceTime } = getDistance(e);
          // defaultForm.value["startTime"] =
          //   fullDate + " " + spliceTime.split(" - ")[0];
          // if (spliceTime.split(" - ")[1] == "00:00") {
          //   const nextDay = new Date(
          //     new Date(fullDate + " 00:00:00").getTime() + 24 * 60 * 60 * 1000
          //   );
          //   const nextDate =
          //     nextDay.getFullYear() +
          //     "-" +
          //     (nextDay.getMonth() + 1 < 10
          //       ? "0" + (nextDay.getMonth() + 1)
          //       : nextDay.getMonth() + 1) +
          //     "-" +
          //     (nextDay.getDate() < 10
          //       ? "0" + nextDay.getDate()
          //       : nextDay.getDate());
          //   defaultForm.value["endTime"] =
          //     nextDate + " " + spliceTime.split(" - ")[1];
          // } else {
          //   defaultForm.value["endTime"] =
          //     fullDate + " " + spliceTime.split(" - ")[1];
          // }
          // defaultForm.value["isAllDay"] = false;
          // dialogEventFormVisible.value = !dialogEventFormVisible.value;
          modelType.value = 2
          getDistance(e);
          dialogModelVisible.value = !dialogModelVisible.value;
          console.log("双击");
        }
        if (num > 2) {
          num = 0;
        }
        num = 0;
      }, 250);
    };
    // 右鍵周
    const handleWeekRight = (e) => {
      modelType.value = 3
      getDistance(e);
      dialogModelVisible.value = !dialogModelVisible.value;
    };
    // 关闭model
    const CloseModel = () => {
      showHeaderTime.value = false;
      showTime.value = false;
    };
    // 左键周的header
    const handleWeekHeaderLeft = (e) => {
      getWeekHeaderDistance(e);
      // const fullDate = e.target.dataset.date;
      // defaultForm.value["actionStartTime"] = fullDate + " 00:00";
      // defaultForm.value["actionEndTime"] = fullDate + " 23:59";
      // defaultForm.value["isAllDay"] = true;
      modelType.value = 'header'
      dialogModelVisible.value = !dialogModelVisible.value;
    };
    // 右键周的header
    const handleWeekHeaderRight = (e) => {
      modelType.value = 'header'
      getWeekHeaderDistance(e);
      dialogModelVisible.value = !dialogModelVisible.value;
    };
    // 获取周header的距离
    const getWeekHeaderDistance = (e) => {

      console.log(scrollDistance.value)
      const day = e.target.dataset.index;
      timeDistance.value.left = day;
      showHeaderTime.value = true;
    };
    // 删除form
    const delEvent = (e) => {
      context.emit('delEvent', e)
      dialogEventDetailVisible.value = !dialogEventDetailVisible.value;
    };
    const editInfo = (e) => {
      state.eventId = e.id
      state.formCode = e.code
      state.formTitle = e.codeName
      const isExist = state.formExist.find(item => item == e.code)
      if(!isExist) {
        ElMessage.error(`${e.codeName}\n编辑操作不存在`)
        return
      }
      dialogEventFormVisible.value = !dialogEventFormVisible.value
    };
    // 查看事项
    const readInfo = (e) => {
      state.eventId = e.id
      state.formCode = e.code
      state.formTitle = e.codeName
      state.readOnly = true
      const isExist = state.formExist.find(item => item == e.code)
      if(!isExist) {
        ElMessage.error(`${e.codeName}\n查看操作不存在`)
        return
      }
      context.emit("update:scrollDisabled", true);
      dialogEventFormVisible.value = !dialogEventFormVisible.value
    }
    // 关闭Form
    const CloseForm = () => {
      showHeaderTime.value = false;
      showTime.value = false;
      defaultForm.value = {};
    };
    // 获取form
    const getForm = (e) => {
      context.emit('submitForm', e)
    };
    const getEvent = (e) => {
      const id = e.target.dataset.id;
      const info = events.value.find((item) => {
        return item.id == id;
      });
      itemInfo.value = {
        info,
        ele: e,
        scroll: scrollDistance.value,
        headerHeight: headerHeight.value.offsetHeight,
      };
      dialogEventDetailVisible.value = !dialogEventDetailVisible.value;
    };
    // allday of week
    const getAllDayEvent = (e) => {
      const id = e.target.dataset.id;
      const info = events.value.find((item) => {
        return item.id == id;
      });
      itemInfo.value = {
        info,
        ele: e,
      };
      dialogEventDetailVisible.value = !dialogEventDetailVisible.value;
    };
    // allday model of week
    const getModelEvent = ({ e, left }) => {
      const id = e.target.dataset.id;
      const info = events.value.find((item) => {
        return item.id == id;
      });
      itemInfo.value = {
        info,
        ele: e,
        left,
      };
      dialogEventDetailVisible.value = !dialogEventDetailVisible.value;
    };
    // 获取当前的时间距离
    const getDistance = (e) => {
      const { time, index } = e.target.dataset;
      // 0:当前时间到半小时后, 1:当前时间半小时后到下一个小时; ex: [00:00 - 00:30], [00:30 - 01:00]
      let spliceTime = time.split(":")[0];
      // 根据时间设置时间格子的top, left;
      let top = 0;
      top = spliceTime - calcHours.value[0].split(":00")[0];
      if (index == 0) {
        spliceTime = spliceTime + ":00" + " - " + spliceTime + ":30";
      } else {
        top += 0.5;
        if (spliceTime == 23) {
          spliceTime = spliceTime + ":30 - 00:00";
        } else {
          let nextHour = spliceTime - 0 + 1;
          if (nextHour < 10) nextHour = "0" + nextHour;
          spliceTime = spliceTime + ":30" + " - " + nextHour + ":00";
        }
      }
      showTime.value = true;
      timeDistance.value.top = top;
      selectedTime.value = spliceTime;
      if (e.target.dataset.date) {
        const { fullDate, day, date } = e.target.dataset;
        timeDistance.value.left = day;
        return {
          fullDate: fullDate || date,
          spliceTime,
        };
      } else {
        return {
          fullDate: nowDate.value.fullDate,
          spliceTime,
        };
      }
    };
    // 判断是否当前周
    const checkCurrentWeek = computed(() => {
      if (currentTime.value) {
        const nowTime =
          currentTime.value.year +
          "-" +
          currentTime.value.month +
          "-" +
          currentTime.value.day;
        const inCurrent = week.value.find((item) => item.fullDate == nowTime);
        if (inCurrent) {
          // 判断时间是否大于最后一个小时
          const current = currentTime.value.hour;
          const len = calcHours.value.length;
          const last = len > 0 ? calcHours.value[len - 1].split(":")[0] : -1;
          if (current <= last) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      } else {
        return false;
      }
    });
    // 判断时间
    const checkOut = computed(() => {
      return (item) => {
        item = item.split(":00")[0];
        const current =
          currentTime.value.year +
          "-" +
          currentTime.value.month +
          "-" +
          currentTime.value.day;
        if (checkCurrentWeek.value) {
          return item > currentTime.value.hour;
        }
        return (
          current !== nowDate.value.fullDate || item > currentTime.value.hour
        );
      };
    });
    // 设置过去的时间
    const checkOutWeek = computed(() => {
      return (item) => {
        const current = new Date(
          currentTime.value.year +
            "-" +
            currentTime.value.month +
            "-" +
            currentTime.value.day +
            " 00:00:00"
        );
        const date = new Date(item.fullDate + " 00:00:00");
        if (current > date) {
          return true;
        } else {
          return false;
        }
      };
    });
    // 设置时间线距顶点的高度
    const getTop = computed(() => {
      return getCurrentTop();
    });
    // 获取当前时间距离开始的距离
    const getCurrentTop = () => {
      const currentPercent = currentTime.value.min / 60;
      if (calcHours.value.length > 0) {
        return ((currentTime.value.hour - calcHours.value[0].split(":")[0] + currentPercent) * 40 - 10);
      } else {
        return (currentTime.value.hour - 0 + currentPercent) * 40 - 10;
      }
    };
    // 快捷操作
    const getQuick = (e) => {
      // 判断是否存在code
      const isExist = state.formExist.find(item => item == e.code)
      if(!isExist) {
        ElMessage.error(`${e.name}\n创建操作不存在`)
        return
      }
      state.formCode = e.code
      state.itemId = e.id
      state.formTitle = e.name
      state.eventId = null
      setTimeout(() => {
        context.emit("update:scrollDisabled", true);
      }, 300);
      dialogEventFormVisible.value = !dialogEventFormVisible.value;
    };
    const handledrapEnter = (e, type) => {
      e.preventDefault();
      e.dataTransfer.dropEffect = "move";
      if (type == "header") {
        e.target.style.background = "#f4f4f4";
      }
    };
    const handledrapOver = (e) => {
      e.preventDefault();
      e.dataTransfer.dropEffect = "move";
    };
    const handledragLevel = (e, type) => {
      dropMessage.value = e.target.dataset;
      if (type == "header") {
        e.target.style.background = "unset";
      }
    };
    const exchangeDate = (e) => {
      // console.log(events.value)
      context.emit('exchangeDate', e)
    };
    // 完成事件
    const completeEvent = (e) => {
      context.emit('completeEvent', e)
    }
    watch(
      () => initHours.value,
      (newVal, oldVal) => {
        calcHours.value = newVal || oldVal;
      }
    );
    watch(
      () => events.value,
      (newVal, oldVal) => {
        const val = newVal || oldVal
        deEvents.value = filterDay(val);
      },
      {
        deep: true
      }
    )
    onMounted(() => {
      currentTime.value = getCurrent();
      state.currentInterver = setInterval(() => {
        currentTime.value = getCurrent();
      }, 1000);
      nextTick(() => {
        const currentTimeRelease =
          ((currentTime.value.hour * 60 + Number(currentTime.value.min)) * 2) /
            3 -
          ((calcHours.value[0].split(":")[0] * 60 * 2) / 3 +
            calcHours.value[0].split(":")[1]);
        const scrollHeight =
          document.querySelectorAll("#scroll")[0].scrollHeight || 0;
        const clientHeight =
          document.querySelectorAll(".content-wrapper")[0].clientHeight || 0;
        const pixel = clientHeight / scrollHeight;
        ScrollTop.value = currentTimeRelease * pixel;
      });
    });
    onBeforeUnmount(() => {
      clearInterval(state.currentInterver);
    });
    return {
      ...toRefs(state),
      handleWeekLeft,
      handleWeekRight,
      handleWeekHeaderLeft,
      handleWeekHeaderRight,
      editInfo,
      CloseForm,
      getForm,
      delEvent,
      dialogEventDetailVisible,
      dialogEventFormVisible,
      itemInfo,
      defaultForm,
      showHeaderTime,
      showTime,
      timeDistance,
      listenScrollBottom,
      listenScrollTop,
      listenScroll,
      ScrollTop,
      getAllDayEvent,
      getModelEvent,
      getEvent,
      isMobile,
      deEvents,
      checkCurrentWeek,
      checkOut,
      checkOutWeek,
      getTop,
      currentTime,
      selectedTime,
      headerHeight,
      dialogModelVisible,
      CloseModel,
      getQuick,
      handledrapEnter,
      handledrapOver,
      exchangeDate,
      handledragLevel,
      dropMessage,
      completeEvent,
      modelType,
      readInfo
    };
  },
};
</script>

<style scoped lang="scss">
.ssal-calendar-container {
  height: calc(100% - 41px);
  position: relative;
  &::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #e4e7ed;
    z-index: 1;
  }
  .week-view {
    height: 100%;
    min-height: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 2;
    .header-week {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      .week-day-container {
        flex: 1;
        position: relative;
        min-height: 60px;
        .week-day-box {
          display: flex;
          align-items: stretch;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
        }
      }
      .week-cell {
        flex: 1;
        box-sizing: border-box;
        padding: 5px 10px;
        position: relative;
        cursor: pointer;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          height: 100%;
          border-right: 1px solid #e4e7ed;
        }
        &:last-child::after {
          border-right: none;
        }
        .week {
          font-size: 12px;
          color: #303133;
        }
        .date {
          margin-top: 5px;
          .day {
            font-size: 14px;
          }
          .lunar {
            margin-left: 10px;
            font-size: 13px;
            color: #909399;
          }
        }
      }
      .weekend-day {
        .week,
        .date {
          // color: #f56c6c;
        }
        .date {
          .lunar {
            // color: rgba(245, 108, 108, 0.6);
          }
        }
      }
      .unable {
        .week,
        .date,
        .date .lunar {
          color: #c0c4cc;
        }
      }
      .week-today {
        .week,
        .date {
          color: var(--ss-color-primary);
        }
        .date {
          .lunar {
            color: var(--el-color-primary-light-6);
          }
        }
      }
    }
    .week-container {
      flex: auto;
      overflow: auto;
      overflow-y: scroll;
      position: relative;
      margin-bottom: 1px;
      margin-right: -7px;
      .today {
        background: #f2f6fc;
      }
    }
    .week-data {
      width: calc((100% - 81px) / 7);
      box-sizing: border-box;
      border-bottom: 1px solid #e4e7ed;
      border-right: 1px solid #e4e7ed;
      position: relative;
      &:last-child {
        border-right: none;
      }
      .current-dotted {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        left: -5px;
        background: #f56c6c;
        z-index: 5;
      }
      .week-half {
        height: 50%;
      }
    }
  }
  .week-area {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 30px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
    .week-cell {
      width: calc(100% / 7);
      text-align: center;
      border-right: 1px solid #e4e7ed;
      font-size: 13px;
      color: #303133;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      &:last-child {
        border-right: none;
      }
    }
    .week-red {
      color: #f56c6c;
    }
  }
  .header-time-zone {
    width: 80px;
    border-right: 1px solid #e4e7ed;
    text-align: center;
    font-size: 13px;
    color: #606266;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 10px 5px 10px;
  }
  .time-cell {
    display: flex;
    align-items: stretch;
    height: 40px;
    .time {
      width: 80px;
      height: 100%;
      font-size: 12px;
      color: #606266;
      border-right: 1px solid #e4e7ed;
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      position: relative;
      top: -10px;
    }
    &:last-child {
      .week-data,
      .day-cell,
      .month-view .month-date {
        border-bottom: none;
      }
      .time{
        &::after {
          content: "";
          position: absolute;
          border-right: 1px solid #e4e7ed;
          right: -1px;
          height: 10px;
          bottom: -9px;
        }
      }
    }
    .outTime {
      color: #c0c4cc;
    }
    .day-cell {
      box-sizing: border-box;
      border-bottom: 1px solid #e4e7ed;
      width: calc(100% - 80px);
      .day-half {
        height: 50%;
      }
    }
  }
  .time-line {
    position: absolute;
    z-index: 5;
    width: 100%;
    display: flex;
    align-items: center;
    height: 1px;
    .current {
      font-size: 13px;
      color: var(--el-color-danger);
      background: #fff;
      width: 78px;
      text-align: center;
      position: relative;
      top: 8px;
      left: 1px;
    }
    .current-line {
      border-top: 1px solid var(--el-color-danger);
      position: relative;
      top: 8px;
      left: 1px;
    }
    .firstDayDotted::before {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--el-color-danger);
    }
    .current-dotted {
      position: absolute;
      top: 4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--el-color-danger);
    }
  }
  .time-placeholder {
    position: absolute;
    z-index: 999;
    margin-left: 80px;
    background: #ecf5ff;
    border: 1px dashed var(--ss-color-primary);
    font-size: 12px;
    text-align: center;
    color: var(--ss-color-primary);
    height: 20px;
    box-sizing: border-box;
    line-height: 20px;
  }
  .close-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.2);
  }
  .scroll-container {
    position: relative;
  }
}
</style>
